<template>
  <div class="home">
    <comment
      ref="comment"
      :interval="dialogInterval"
      @close="dialogIntervalInit"
    ></comment>
    <!-- <myDialog ref="dialog"
                  @close="dialogIntervalInit"
                  :interval="dialogInterval"></myDialog> -->
    <div class="left">
      <leftTop :info="leftTopData"></leftTop>
      <leftMid :info="leftMidData"></leftMid>
      <leftBottom :info="leftBottomData"></leftBottom>
    </div>
    <percent :show="isPercent" :info="percentData"></percent>
    <sales :show="!isPercent" :info="salesData"></sales>
    <bottom :info="bottomData"></bottom>

    <div class="right">
      <rightTop :info="rightTopData"></rightTop>
      <rightMid
        :info="rightMidData"
        @click.native="openDialog('comment')"
      ></rightMid>
      <rightBottom
        :data="rightBottomData"
        @click.native="openDialog('mapDialog')"
      ></rightBottom>
    </div>
    <storeData
      ref="mapDialog"
      :interval="dialogInterval"
      @close="dialogIntervalInit"
    ></storeData>
  </div>
</template>

<script>
import percent from "./components/percent.vue";
import sales from "./components/sales.vue";
import leftTop from "./components/leftTop.vue";
import leftMid from "./components/leftMid.vue";
import leftBottom from "./components/leftBottom.vue";
import rightTop from "./components/rightTop.vue";
import rightBottom from "./components/rightBottom.vue";
import rightMid from "./components/rightMid.vue";
import bottom from "./components/bottom.vue";
import {
  queryHomeData,
  queryBottom,
  queryRightBottom,
  queryLeftTop,
} from "@/api/home.js";
import comment from "../comment/index.vue";
import storeData from "../storeData/index.vue";
export default {
  components: {
    percent,
    sales,
    leftTop,
    leftMid,
    leftBottom,
    rightBottom,
    rightTop,
    rightMid,
    bottom,
    comment,
    storeData,
  },
  data() {
    return {
      centerInterval: 10, //中央切换间隔
      apiInterval: 10, //自动刷新接口间隔
      dialogInterval: 120, //口碑弹窗自动间隔
      dialogTimer: null,
      isPercent: true,
      leftTopData: {},
      leftMidData: {},
      leftBottomData: {},
      rightTopData: {},
      rightMidData: {},
      rightBottomData: {
        "channel":0,
        "port":0,
        "shopType":0,
        "shopCount":0,
        "self":{
            "count":0,
            "children":[
                {
                    "name":"官旗",
                    "count":1
                },
                {
                    "name":"品旗",
                    "count":2
                }
            ]
        },
        "pop":{
            "count":0,
            "children":[
                {
                    "name":"专卖店",
                    "count":1
                },
                {
                    "name":"旗舰店",
                    "count":2
                },
                {
                    "name":"专营店",
                    "count":3
                },
                {
                    "name":"卖场性旗舰店",
                    "count":4
                }
            ]
        }
      },
      bottomData: {},
      percentData: {},
      salesData: {},
      showDialog: 0,
    };
  },
  computed: {},
  methods: {
    getData() {
    //获取导入数据
    queryHomeData().then((resData) => {
            const res = resData.data ? resData.data : resData;
            this.generateData(res);
        })
        .catch((err) => {
            console.log(err.message);
            this.fetchStaticData();
        });

      queryLeftTop().then((res) => {
        this.leftTopData = res.data.data;
      });
      queryBottom().then((res) => {
        this.bottomData = res.data.data;
      });
      queryRightBottom().then((res) => {
        this.rightBottomData = res.data.data;
      });
    },
      // 备选静态数据
      fetchStaticData() {
          this.$axios.get('./data/home/data.json').then((resData) => {
              const res = resData.data;
              this.generateData(res);
          });
      },
      generateData(res) {
          this.leftMidData = res.leftMidData;
          this.leftBottomData = res.leftBottomData;
          this.rightTopData = res.rightTopData;
          this.rightMidData = res.rightMidData;
          this.percentData = res.percent;
          this.salesData = res.sales;
      },
    openDialog(val) {
      clearTimeout(this.dialogTimer);
      this.dialogTimer = null;
      this.$refs[val].open();
    },
    dialogIntervalInit() {
      this.dialogTimer = setInterval(() => {
        if (this.showDialog) {
          this.openDialog("comment");
          this.showDialog = 0;
        } else {
          this.openDialog("mapDialog");
          this.showDialog = 1;
        }
      }, this.dialogInterval * 1000);
    },
  },
  created() {},
  mounted() {
    this.getData();
    setInterval(() => {
      this.getData();
    }, this.apiInterval * 1000);
    setInterval(() => {
      this.isPercent = !this.isPercent;
    }, this.centerInterval * 1000);
    this.dialogIntervalInit();
  },
};
</script>
<style lang='less' scoped>
.home {
  width: 100%;
  height: 100%;
  background: url(../../assets/img/home/bg.jpg);
}
</style>
